<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <h1 class="text-center">各班级出勤明细</h1>
        <form class="form-inline">
            <label>按班级查找</label>
            <select id="class" class="form-control">
                <option value="0">-- 所有班级 --</option>
            </select>

            <label>按点名人查找</label>
            <select id="user"  class="form-control">
                <option value="0">-- 所有点名人 --</option>
            </select>
        </form>
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>点名日期</th>
                    <th>学院</th>
                    <th>班级</th>
                    <th>讲师</th>
                    <th>班级人数</th>
                    <th>实到人数</th>
                    <th>缺勤人数</th>
                    <th>出勤率</th>
                    <th>点名人</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script>
        $(function () {
            loadData();//默认查询所有出勤记录

            //加载班级数据到对应的下拉框
            $.get(
                "/class/list",
                function (data) {
                    for(var i in data) {
                        var option = $("<option></option>");
                        option.val(data[i].id);//
                        option.text(data[i].college + " - " + data[i].className);
                        $("#class").append(option);
                    }
                }
            );

            $("#class").change(function () {//重新选择班级
                var classId = $(this).val();//重新获取班级id
                var userId = $("#user").val();//重新获取用户id
                $("tbody").empty();
                loadData(classId, userId);
            });

            $("#user").change(function () {//重新选择班级
                var classId = $("#class").val();//重新获取班级id
                var userId = $("#user").val();//重新获取用户id
                $("tbody").empty();
                loadData(classId, userId);
            });

            $.get(
                "/user/list",
                function (data) {
                    for(var i in data) {
                        var option = $("<option></option>");
                        option.val(data[i].id);//
                        option.text(data[i].name);
                        $("#user").append(option);
                    }
                }
            );
        });

        function loadData(classId, userId) {
            $.get(
                "/attendance/list",
                {"classId":classId, "userId":userId},
                function (data) {
                    if (data==null || data.length==0){
                        alert("未找到任何结果！");
                        return;
                    }
                    for (var i in data) {

                        var tr = $("<tr></tr>");
                        tr.append("<td>" + data[i].id + "</td>");
                        tr.append("<td>" + data[i].checkDate + "</td>");
                        tr.append("<td>" + data[i].rcClass.college + "</td>");
                        tr.append("<td>" + data[i].rcClass.className + "</td>");
                        tr.append("<td>" + data[i].rcClass.teacherName + "</td>");
                        tr.append("<td>" + data[i].rcClass.studentNum + "</td>");
                        tr.append("<td>" + data[i].attendancePersonNum + "</td>");
                        tr.append("<td>" + data[i].absencePersonNum + "</td>");
                        tr.append("<td>" + data[i].attendanceRate*100+"%" + "</td>");
                        tr.append("<td>" + data[i].rcUser.name + "</td>");
                        tr.append("<td>" + data[i].remark + "</td>");
                        tr.append("<td></td>");

                        $("tbody").append(tr);
                    }
                }
            );
        }

    </script>
</body>
</html>
